<template>
  <view class="viewport">
    <scroll-view class="scroll-view" :refresher-triggered="refreshing" scroll-y="true" lower-threshold="20" @scrolltolower="onScrollToLower" @refresherrefresh="onRefresh">
      <view class="warp">
        <view class="title">
          <fui-section title="审批流程" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
        </view>
        <view class="ul">
          <view class="li">
            <view class="img_box">
              <view class="img_left">凤九</view>
              <image class="img" src="/static/images/index/goxuan.svg" mode=""></image>
            </view>
            <view class="title">凤九</view>
            <view class="apply">发起申请</view>
            <view class="apply">2023.01.14 16:34:07</view>
          </view>
          <view class="xian"></view>
          <view class="li_item">
            <view class="img_box">
              <view class="img_left">凤九</view>
            </view>
            <view class="title">凤九</view>
            <view class="apply">待审批</view>
            <!-- <view class="apply">2023.01.14 16:34:07</view> -->
          </view>

          <view class="xian"></view>
          <view class="li_item">
            <view class="img_box">
              <view class="img_left">凤九</view>
            </view>
            <view class="title">凤九</view>
            <view class="apply">待审批</view>
            <!-- <view class="apply">2023.01.14 16:34:07</view> -->
          </view>

          <view class="xian"></view>
          <view class="li_item">
            <view class="img_box">
              <view class="img_left">凤九</view>
            </view>
            <view class="title">凤九</view>
            <view class="apply">待审批</view>
            <!-- <view class="apply">2023.01.14 16:34:07</view> -->
          </view>

          <view class="xian"></view>
          <view class="li_item">
            <view class="img_box">
              <view class="img_left">凤九</view>
            </view>
            <view class="title">凤九</view>
            <view class="apply">待审批</view>
            <!-- <view class="apply">2023.01.14 16:34:07</view> -->
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: skyblue;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  height: 100%;
}
.warp {
  padding-bottom: 100rpx;
  // background-color: pink;
  // display: flex;
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  .ul {
    margin-top: 20rpx;
    padding-top: 40rpx;
    // border-top: 1px solid #ccc;
    .xian {
      height: 100rpx;
      width: 2rpx;
      background-color: #ccc;
      margin-left: 90rpx;
    }
    .li_item {
      display: flex;
      padding: 0 30rpx 0 40rpx;
      align-items: center;
      .title {
        margin-left: 45rpx;
      }
      .apply {
        margin-left: 55rpx;
        color: #0052d9;
      }
    }
    .li {
      display: flex;
      padding: 0 30rpx 0 40rpx;
      align-items: center;
      justify-content: space-between;
      .apply {
        color: #ccc;
      }
    }
    .img_box {
      position: relative;
      .img_left {
        background-color: #0052d9;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .img {
        position: absolute;
        right: 0;
        top: 70rpx;
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
